<template>
  <div class="shop">
    <div class="shop-data">
      <!-- 输入任意文本 -->
      <van-field
        v-model="certification_name"
        label="营业执照名称"
        placeholder="营业执照名称"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
      <!-- <van-field
        v-model="certification_type"
        label="营业执照类型"
        placeholder="营业执照类型"
        :rules="[{ required: true, message: '请填写' }]"
      /> -->
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="certification_address"
        label="营业执照经营场所"
        placeholder="营业执照经营场所或住所"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field
        v-model="certification_legalrepresentative"
        label="营业执照法人"
        placeholder="营业执照法定代表人或经营者姓名"
        :rules="[{ required: true, message: '请填写' }]"
        required
      />
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <!-- <van-field
        v-model="certification_endtime"
        type="number"
        label="营业执照期限"
        placeholder="营业执照期限"
        :rules="[{ required: true, message: '请填写' }]"
      /> -->
      <!-- <van-field v-model="note" type="number" label="备注" placeholder="备注" /> -->
      <van-field
        v-model="bankcardno"
        label="收款账户"
        placeholder="请填写对公账号"
      />
      <van-field
        v-model="bankname"
        label="银行名称"
        placeholder="银行名称"
      />
      <van-field
        v-model="bankofdeposit"
        label="开户行(含支行/分行信息)"
        placeholder="请填写“支行或分行”信息"
      />
      <van-field
        v-model="bankarea"
        label="银行地市"
        placeholder="银行地市"
      />
    </div>
    <div class="idcard">
      <div>营业执照上传</div>
      <div class="idcardpic">
         
        <div>
            <van-field
            name="uploader"
            error-message-align="center"
            :rules="[{ required: true, message: '请上传' }]"
            required
          >
            <template #input>
              
          <van-uploader
            v-model="certification"
            result-type="dataUrl"
            class="certification"
            :max-count="1"
            :before-read="beforeRead"
          />
            </template>
          </van-field>
        </div>
        <div class="tips-tips">
          1.图片大小为2M以内;图片为横版<br/>
          2.图片清晰、无遮挡、无反光<br/>
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>
import { toRefs } from "vue";
import { Toast } from "vant";
import compressor from '@/lib/compressor';
export default {
  props: {
    shop_data: {
      type: Object,
    },
  },
  setup(props) {
     const beforeRead =async (file) => {
           try{
            // let filesize = (file.size / 1024 / 1024).toFixed(1);
            // let res=file;
            // while(filesize>0.5){
            //   res= await compressor(res);
            //   filesize=(res.size / 1024 / 1024).toFixed(1);
            //   console.log(filesize+":"+res.size);
            // }
            // console.log("最终大小"+filesize+":"+res.size);
           const res= await compressor(file);
             return res;
           }catch(err){
             Toast("上传失败！请重试");
           }
          
        };
    return { ...toRefs(props.shop_data),beforeRead };
  },
};
</script>
<style lang="scss" scoped>
.shop {
  margin: 1.2rem;
  font-size: 1.3rem;
  .shop-data {
    border-radius: 1rem;
    overflow: hidden;
  }
  .idcard {
    border-radius: 1rem;
    overflow: hidden;
    margin: 1.2rem 0;
    background: #fff;
    padding: 1rem 0;
    .idcardpic {
      display: flex;
      justify-content: center;
      padding: 1rem;
      & > div {
        display: flex;
        flex: 1;
        span {
          color: #aaa;
          font-size: 1.3rem;
        }
      }
    }
  }
  .tips-tips {
          color: red;
    padding: 2rem 1rem 0;
    text-align: left;
    }
}

.certification{
  margin: auto;
}
</style>
